import React from 'react';
import { inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {WeaTableNew} from 'comsMobx';
import { Button } from 'antd';
import {WeaTop,WeaTab,WeaLeftRightLayout,WeaRightMenu,WeaPopoverHrm,WeaTools,WeaErrorPage,WeaLocaleProvider,WeaDialog} from 'ecCom';
const { toJS } = mobx;
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfFreeFlowTemplateStore')
@observer
class EditFreeTemplate extends React.Component {
    constructor(props) {
		super(props);
    }
    doInit(props){
        const { wfFreeFlowTemplateStore } = props;
        const { searchList , getAddTemplateBaseData} = wfFreeFlowTemplateStore;
        
    }
    componentDidMount() {
        this.doInit(this.props);
    }
    componentWillReceiveProps(nextProps) {
        // if(this.props.location.key !== nextProps.location.key) {
        //     const { wfFreeFlowTemplateStore } = this.props;
        //     this.doInit(nextProps);
        // }
    }
    componentWillUnmount() {
        const { wfFreeFlowTemplateStore } = this.props;
        const { clearMobxState} = wfFreeFlowTemplateStore;
        clearMobxState();
    }
    
    render() {
        const { wfFreeFlowTemplateStore } = this.props;
        const { setEditModalShow , editModalShow , editTemplateTabs , personalTabs ,editSelectedTabKey,curModelObject,addForm} = wfFreeFlowTemplateStore;
        
        const formParams = addForm.getFormParams();
        const { type = '0'} = formParams;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@uxyi5j`}
                visible={editModalShow}
                title={`${getLabel(28052,'编辑模板')}-${curModelObject.name}`}
                icon="icon-coms-workflow"
                iconBgcolor='#0079DE'
                maskClosable={false}
                buttons={this.getModalBtns()}
                onCancel={() => setEditModalShow(false)}
                style={{width: "800px",height:'500px'}}
                moreBtn={{datas:this.getRightMenu()}}
                hasScroll
            >
                <div className="wf-free-flowset-editModal">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@zns6ye`} 
                        collectParams={{favname:getLabel(28052,'编辑模板'), favouritetype:2}}
                        datas={this.getRightMenu()}>
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@x4172e`}
                            datas={type == '0' ? personalTabs : editTemplateTabs}
                            selectedKey={editSelectedTabKey}
                            keyParam="key"  //主键
                            onChange={this.switchTab.bind(this)} 
                        />
                        {this.getContent()}
                    </WeaRightMenu>
                </div>
            </WeaDialog>
        )
    }
    switchTab(key){
        const { wfFreeFlowTemplateStore } = this.props;
        const { switchEditTab } = wfFreeFlowTemplateStore;
        switchEditTab(key);
    }
    getContent(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { addForm , addCondition , editSelectedTabKey , shareRangeTableStore,editTemplateTabs} = wfFreeFlowTemplateStore;
        let coms;
        let obj = {};
        if(editSelectedTabKey == '0'){//基本信息
            coms = addForm.render({
                needTigger: false,
                showGroup:true,
                showTitle:false,
                col:1
                }, {
                    onChange:(v)=>{
                        for(let key in v){
                            if(key=='name'){
                                if(v[key].value.replace(/[^\u0000-\u00ff]/g,"aaa").length == 100) {
                                    addForm.showError('name', '"'+getLabel(18151, '模板名称')+'"' +getLabel(502997, '长度不能超过')+" 100 "+ getLabel(20075, '个字符'));
                                }
                            }
                        }
                    }
                }
            );
        }else{//共享范围
            coms = <div className='add-share'>
                <div className='add-share-btns'>{this.getShareBtns()}</div>
                <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@ugubcu`} />
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@gv1v98`} 
                    comsWeaTableStore={shareRangeTableStore}
                    hasOrder={true}
                    scroll={{y: 365}}
                />
            </div>
        }
        return coms;
    }
    getShareBtns(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { shareRangeTableStore , setAddShareModalShow , deleteShareItem} = wfFreeFlowTemplateStore;
        const selectedRowKeys = shareRangeTableStore.selectedRowKeys;
        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@49jsy5@add`} style={{border:'none',padding:'0px',fontSize:'20px',lineHeight:'1',color: '#55a1f8',backgroundColor:'#fff'}} 
                type="primary" title={getLabel(611,'添加')} size="small" 
                onClick={()=>{
                    setAddShareModalShow(true);
                }}>
                <span className="icon-coms-Add-to-hot"/>
            </Button>
        );
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sis1hu@delete`} style={{border:'none',padding:'0px',fontSize:'20px',lineHeight:'1',color: selectedRowKeys.length <= 0 ? '#d8d8d8':'#55a1f8',marginLeft:'10px',backgroundColor: '#fff'}} type="primary"
                title={getLabel(126371,'删除')} size="small" disabled={selectedRowKeys.length <= 0} 
                onClick={()=>{
                    deleteShareItem(toJS(selectedRowKeys).join(','));
                }} >
                <span className="icon-coms-form-delete-hot"/>
            </Button>
        );
        return btns;
    }
    addSave(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { addForm , addSave } = wfFreeFlowTemplateStore;

        addForm.validateForm().then(f=>{
            console.log(f.isValid, 'validateForm');
            if(f.isValid){
                addSave(false,true);
            }else{
                f.showErrors();
                this.setState({date: new Date()}); // 改变一个state的变量,强制页面刷新
            }
        });

    } 
    getModalBtns(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { editSelectedTabKey , operateBtnsState} = wfFreeFlowTemplateStore;
        const {addSaving} = operateBtnsState;
        let btns = [];
        if(editSelectedTabKey == '0'){
            btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zqc5lc@save`} type="primary" disabled = {addSaving} onClick={()=>{this.addSave()}}>{getLabel(86,'保存')}</Button>);
        }
        return btns;
    }
    getRightMenu(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { editSelectedTabKey , operateBtnsState} = wfFreeFlowTemplateStore;
        const {addSaving} = operateBtnsState;
        let rtMenus = [];
        if(editSelectedTabKey == '0'){
            rtMenus.push({
                key: "save",
                icon: <i className="icon-coms-Preservation"/>,
                content:getLabel(86,'保存'),
                disabled : addSaving,
                onClick: key =>{ this.addSave()}
            });
        }
    	return rtMenus;
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@utgdjo`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(EditFreeTemplate);